<template>
    <view class="cn-component-drawer">
        <scroll-view @scrolltolower="scrolltolower" scroll-y class="drawer_page" :class="drawer_show ? 'show' : ''">
            <slot name="main"></slot>
        </scroll-view>
        <view class="drawer_close" :class="drawer_show ? 'show' : ''" @tap="$emit('update:drawer_show', false)">
            <text class="cuIcon-pullright"></text>
        </view>
        <scroll-view scroll-y class="drawer_window" :class="drawer_show ? 'show' : ''" :style="'padding-top:'+$store.state.app.status_bar">
            <slot name="left"></slot>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        props: ['scrolltolower', 'drawer_show'],
    }
</script>

<style lang="less">
    .cn-component-drawer {
        .drawer_page {
            position: fixed;
            width: 100vw;
            height: 100vh;
            left: 0vw;
            background-color: #f1f1f1;
            transition: all 0.4s;
        }

        .drawer_page.show {
            transform: scale(0.9, 0.9);
            left: 85vw;
            box-shadow: 0 0 60rpx rgba(0, 0, 0, 0.2);
            transform-origin: 0;
        }

        .drawer_window {
            position: absolute;
            width: 85vw;
            height: 100vh;
            left: 0;
            top: 0;
            transform: scale(0.9, 0.9) translateX(-100%);
            opacity: 0;
            pointer-events: none;
            transition: all 0.4s;
        }

        .drawer_window.show {
            transform: scale(1, 1) translateX(0%);
            opacity: 1;
            pointer-events: all;
        }

        .drawer_close {
            position: absolute;
            width: 40vw;
            height: 100vh;
            right: 0;
            top: 0;
            color: transparent;
            padding-bottom: 30rpx;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
            letter-spacing: 5px;
            font-size: 50rpx;
            opacity: 0;
            pointer-events: none;
            transition: all 0.4s;
        }

        .drawer_close.show {
            opacity: 1;
            pointer-events: all;
            width: 15vw;
            color: #fff;
        }
    }
</style>